<script setup>
import { ref } from "vue";

const pwd1 = ref('');
const pwd2 = ref('');
const type = ref('password');
const icon = ref('closed-eye');

const onSubmit = (values) => {
  console.log('submit', values);
};

const changeFn = () => {
  // Toggle between password and text types
  if (type.value === 'password') {
    type.value = 'text';
    icon.value = 'eye-o';
  } else {
    type.value = 'password';
    icon.value = 'closed-eye';
  }
};
</script>

<template>
  <van-form @submit="onSubmit" required="auto">
    <van-cell-group inset>
      <van-field
          v-model="pwd1"
          :type="type"
          name="pwd1"
          label="新的密码"
          :right-icon="icon"
          placeholder="请输入新的密码"
          :rules="[{ required: true, message: '请填写新的密码' }]"
          @click-right-icon="changeFn"
      />
      <van-field
          v-model="pwd2"
          :type="type"
          name="pwd2"
          label="确认密码"
          :right-icon="icon"
          placeholder="请填写确认密码"
          :rules="[{ required: true, message: '请填写确认密码' }]"
          @click-right-icon="changeFn"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>

<style scoped>
/* Add any desired styles here */
</style>